<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->

<head>
	<meta charset="utf-8">
	<title>线路详情</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="" name="description">
	<meta content="" name="author">
	<!-- BEGIN GLOBAL MANDATORY STYLES -->
	<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css">
	<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
	<!-- END GLOBAL MANDATORY STYLES -->
	<!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
	<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css">
	<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css">
	<!-- END PAGE LEVEL PLUGIN STYLES -->
	<!-- BEGIN PAGE STYLES -->
	<link href="assets/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" />
	<!-- END PAGE STYLES -->
	<!-- BEGIN THEME STYLES -->
	<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
	<link href="assets/global/css/components-rounded.css" id="style_components" rel="stylesheet" type="text/css">
	<link href="assets/global/css/plugins.css" rel="stylesheet" type="text/css">
	<link href="assets/admin/layout3/css/layout.css" rel="stylesheet" type="text/css">
	<link href="assets/admin/layout3/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color">
	<link href="assets/admin/layout3/css/custom.css" rel="stylesheet" type="text/css">
	<link rel="shortcut icon" href="img/logo.png" />
	<style>
		.link-active {
			background-color: #DFF0CA;
		}

		[v-cloak] {
			display: none;
		}
	</style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->

<body>

	<div id="app">
		<!-- BEGIN PAGE CONTAINER -->
		<div class="page-container" v-cloak>
			<!-- BEGIN PAGE CONTENT -->
			<div class="page-content">
				<div class="container">
					<!-- BEGIN PAGE CONTENT INNER -->
					<div class="row">
						<div class="col-md-12">
							<!-- BEGIN PORTLET-->
							<div class="portlet light tasks-widget">
								<div class="portlet-title tabbable-line">
									<div class="caption caption-md">
										<i class="icon-globe theme-font hide"></i>
										<span class="caption-subject theme-font bold uppercase">详情</span>
									</div>
									<div class="back">
										<a style="font-size: 13px;" href="GLList.html" class="btn btn-circle btn-sm blue" @click="toBack($event)">返回 </a>
									</div>
								</div>
								<!-- <div>
								<img class="img-responsive margin-bottom-10" src="../assets\admin\pages\img\line1.jpg"
									alt="">
							</div> -->
								<div class="portlet-body fix-height">
									<!-- <p style="border-bottom: 3px solid #F4F6F9;"></p> -->

									<div class="font-grey-mint font-sm">
										线路名称：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.lineName"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障发生时间：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.times"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										故障解除时间：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.entimes"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										位置：
									</div>
									<div class="font-md font-blue-sharp">
										在节点【{{gaojing.origin}}】和节点【{{gaojing.finishing}}】之间。距离节点{{gaojing.origin}}】大约{{gaojing.distance}}米。
									</div>
									<hr>
									<div class="font-grey-mint font-sm margin-top-10">
										链路名称：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.linkName"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										业务名称：
									</div>
									<div class="font-md font-blue-sharp">
										<p v-for="item in gaojing.works" v-text="item"></p>
									</div>
									<div class="font-grey-mint font-sm margin-top-10">
										运行状态：
									</div>
									<div class="font-md font-green" v-text="gaojing.status"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										衰减值：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.attenuations"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										建设年代：
									</div>
									<div v-if="gaojing.describe != ''" class="font-md font-blue-sharp" v-text="gaojing.times"></div>
									<div v-if="gaojing.describe == ''" class="font-md font-blue-sharp" v-text="gaojing.describe"></div>
									<div class="font-grey-mint font-sm margin-top-10">
										维护人信息：
									</div>
									<div class="font-md font-blue-sharp" v-text="gaojing.cancat"></div>

								</div>
							</div>
							<!-- END PORTLET-->
						</div>
					</div>

					<!-- END PAGE CONTENT INNER -->
				</div>
			</div>
			<!-- END PAGE CONTENT -->
		</div>
		<!-- END PAGE CONTAINER -->
	</div>
	<!-- BEGIN JAVASCRIPTS (Load javascripts at bottom, this will reduce page load time) -->
	<!-- BEGIN CORE PLUGINS -->
	<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
	<script src="assets/layer/layer.js" type="text/javascript"></script>
	<script src="assets/js/vue.js"></script>
	<script src="assets/js/axios.min.js"></script>
	<script src="assets/js/xlsx.full.min.js"></script>
	<script src="assets/js/config.js"></script>
	<script src="assets/js/http.js"></script>
	<!-- END PAGE LEVEL SCRIPTS -->
	<script>
		jQuery(document).ready(function () {
			(function ($) {
				$.extend({
					urlGet: function (key) {
						var aQuery = window.location.href.split("?");  //取得Get参数
						var aGET = new Array();
						if (aQuery.length > 1) {
							var aBuf = aQuery[1].split("&");
							for (var i = 0, iLoop = aBuf.length; i < iLoop; i++) {
								var aTmp = aBuf[i].split("=");  //分离key与Value
								aGET[aTmp[0]] = aTmp[1];
							}
						}
						console.log(key);
						if (!key) {
							return aGET
						}
						if (aGET[key]) {
							return aGET[key]
						} else {
							return undefined
						}
					}
				})
			})(jQuery);
			const { createApp } = Vue;
			const app = createApp({
				data() {
					return {
						gaojing: {},
						gaojingId: 0
					}
				},
				methods: {
					getGaojing() {
						try {
							layer.load(0, { msg: "数据传输中，请稍后..." });
							axios.post(config.getUrl() + "/getGaojing", { gaojingId: this.gaojingId }).then(
								res => {
									if (res.status == 200) {
										layer.closeAll()
										if (res.data.code == 0) {
											let obj = res.data.data;
											/* obj.works = JSON.parse(obj.works);
											let tmp = new Date(obj.times * 1000);
											obj.times = `${tmp.toLocaleDateString().replace(/\//g, "-")} ${tmp.toTimeString().substr(0, 8)}`;
											let rmp = new Date(obj.times * 1000);
											obj.runtimes = `${rmp.toLocaleDateString().replace(/\//g, "-")} ${rmp.toTimeString().substr(0, 8)}`; */
											res.data.data.works = JSON.parse(res.data.data.works)
											this.gaojing = res.data.data;
											console.log(this.gaojing);
										} else {
											layer.msg(res.data.msg, { time: 3000 })
										}
									} else {
										layer.msg("网络错误", { time: 3000 });
									}
								}
							)
						} catch (error) {

						}
					},
					toBack(e){
						e.preventDefault()
						window.location.href = `${config.baseUrl}/gjls`;
					}
				},
				created() {
					this.gaojingId = $.urlGet("gaojingId");
					this.getGaojing()
				}
			});
			app.mount("#app");
		})
	</script>
</body>
<!-- END BODY -->

</html>